<template>
  <div>
    <!-- 1.登录头部导航提示 -->
    <van-nav-bar title="首页"></van-nav-bar>
    <!-- 2.搜索按钮 -->
    <van-button
      type="default"
      color="rgb(237, 237, 237)"
      round
      block
      size="small"
      @click="
        $router.push({
          name: 'search',
          params: {
            a: 'A',
            b: 'B',
          },
        })
      "
    >
      <!-- to="/search" -->
      <van-icon name="search" />
      <span>商品搜索 共239款好物</span>
    </van-button>

    <!-- 3.轮播图 -->

    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :show-indicators="true"
    >
      <van-swipe-item v-for="obj in dataAll.banner" :key="obj.id">
        <img :src="obj.image_url" class="banner_img" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 4.广告栏 -->
    <ul class="list_channel">
      <li v-for="obj in dataAll.channel" :key="obj.id">
        <img :src="obj.icon_url" alt="" />
        <span>{{ obj.name }}</span>
      </li>
    </ul>
    <!-- 5.  -->
    <BrandSupply :brandList="dataAll.brandList"></BrandSupply>
    <!-- 6 -->
    <NewGoodsList :goodlist="dataAll.newGoodsList"></NewGoodsList>
    <!-- 7.人气商品 -->
    <HotGoodsList :hotGoodsList="dataAll.hotGoodsList"></HotGoodsList>
    <!-- 8.底部轮播图 -->
    <TopicList :topicList="dataAll.topicList"></TopicList>
    <!-- 9.商品分类 -->
    <categoryList :categoryList="dataAll.categoryList"></categoryList>
  </div>
</template>

<script>
import { HomeDataAll } from "@/api/homeAPI.js";
import BrandSupply from "@/views/home/components/BrandSupply.vue";
import NewGoodsList from "@/views/home/components/newGoodsList";
import HotGoodsList from "@/views/home/components/hotGoodsList";
import TopicList from "@/views/home/components/TopicList";
// 商品分类列表
import  categoryList from "@/views/home/components/categoryList.vue"
export default {
  name: "HomeIndex",
  data() {
    return {
      dataAll: {},
    };
  },
  created() {
    this.getHomeDataAll();
  },
  components: {
    BrandSupply,
    NewGoodsList,
    HotGoodsList,
    TopicList,
    categoryList
  },
  methods: {
    async getHomeDataAll() {
      try {
        const res = await HomeDataAll();
        if (res.data.errno == 0) {
          this.dataAll = res.data.data;

          // this.$toast.success("数据请求成功!");
        } else {
          console.log("请求成功,但获取数据失败");
          // this.$toast.success("数据没请求成功!");
        }
      } catch (err) {
        // console.log(err)
        console.log("数据请求错误");
      }
    },
  },
};
</script>

<style scoped lang="scss">
// 在scss中的样式穿透是::v-deep 选择器{属性名:属性值;}
::v-deep .van-nav-bar__content {
  background-color: rgb(225, 28, 52) !important;
}
::v-deep .van-icon-arrow-left {
  color: #fff !important;
}
::v-deep .van-nav-bar__title.van-ellipsis {
  color: #fff;
}
::v-deep .van-button--block {
  width: 90%;
  // margin: 20px 0;
  margin: 30px auto 10px auto;
}
::v-deep van-icon-search,
::v-deep .van-button__text {
  color: #666;
  font-size: 30px !important;
}

::v-deep .my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
::v-deep .van-swipe-item {
  height: 416px;
}
// banner
.banner_img {
  height: 416px;
}
// ===========
.list_channel {
  display: flex;
  justify-content: space-evenly;
  padding: 20px 0;
  text-align: center;
  li {
    display: flex;
    flex-direction: column;
  }
  img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #eee;
  }
  span {
    font-size: 30px;
    color: #666;
  }
}
</style>
